<template>
    <div class="detailbody">
        <div class="detail-img" :style="{ backgroundColor: color }">
            <div class="img-item">
                <div class="img-left">
                    <svg-icon :icon-class="icon" class-name="svgsize" v-for=" i in 100"></svg-icon>
                </div>
                <!-- <div>{{ this.id }}</div> -->
                <div class="img-center">
                    <p class="img-title">{{ name }}</p>
                    <p class="intro">{{ introduce }}</p>
                    <div class="img-time"> <span>当前版本：0.0.1 </span> <span>上传作者：王小明</span><span>上传时间：2017-04-09</span>
                    </div>
                    <p class="state">当前状态：可应用</p>

                    <div class="img-time">
                        <span><i class="el-icon-set-up"></i>已调用{{ use }}次</span>
                        <span><i class="el-icon-star-on"></i>收藏5</span>
                        <span><i class="el-icon-view"></i>查看{{ view }}</span>
                    </div>

                </div>


            </div>
        </div>

        <div class="nav">
            <div class="title divlink">详细信息：</div>
            <div class="active divlink">
                <div class="active-div"></div> API
            </div>
        </div>
        <div class="detailmain">
            <div class="left-list">
                <!-- <div class="left-down"></div> -->
                <div class="left" :class="isShow ? 'showfixed' : 'nofixed'">
                    <div>
                        <div @click="add(1)" class="left-top" :class="list == 1 ? 'left-active' : 'left-top-item'">
                            <div class="semicircle" v-if="list == 1"></div>
                            <div class="bigC" v-if="true">
                                <div class="smallC"></div>
                            </div>
                            <p class="p-top">添加部门</p>
                        </div>
                        <div class="List" :class="list == 1 ? 'addList' : 'noList'">
                            <div :class="listChildren == 1 ? 'ischange' : 'add-item'">
                                <div class="router" @click="address()">请求地址</div>
                                <!-- <router-link to="#address" >请求地址</router-link> -->
                            </div>
                            <div :class="listChildren == 2 ? 'ischange' : 'add-item'">
                                <div class="router" @click="parameter()">请求参数</div>
                            </div>
                            <div :class="listChildren == 3 ? 'ischange' : 'add-item'">
                                <div class="router" @click="res()">响应参数</div>
                            </div>
                            <div :class="listChildren == 4 ? 'ischange' : 'add-item'">
                                <div class="router" @click="example()">请求示例</div>
                            </div>
                        </div>
                    </div>
                    <div @click="add(2)" class="left-top" :class="list == 2 ? 'left-active' : 'left-top-item'">
                        <div class="semicircle" v-if="list == 2"></div>
                        <div class="bigC" v-if="true">
                            <div class="smallC"></div>
                        </div>
                        <p class="p-top">修改部门</p>
                    </div>
                    <div class="List" :class="list == 2 ? 'addList' : 'noList'">
                        <div :class="listChildren == 1 ? 'ischange' : 'add-item'">
                            <div class="router" @click="address()">请求地址</div>
                            <!-- <router-link to="#address" >请求地址</router-link> -->
                        </div>
                        <div :class="listChildren == 2 ? 'ischange' : 'add-item'">
                            <div class="router" @click="parameter()">请求参数</div>
                        </div>
                        <div :class="listChildren == 3 ? 'ischange' : 'add-item'">
                            <div class="router" @click="res()">响应参数</div>
                        </div>
                        <div :class="listChildren == 4 ? 'ischange' : 'add-item'">
                            <div class="router" @click="example()">请求示例</div>
                        </div>
                    </div>
                    <div @click="add(3)" class="left-top" :class="list == 3 ? 'left-active' : 'left-top'">
                        <div class="semicircle" v-if="list == 3"></div>
                        <div class="bigC" v-if="true">
                            <div class="smallC"></div>
                        </div>
                        <p class="p-top">删除部门</p>
                    </div>
                    <div class="List" :class="list == 3 ? 'addList' : 'noList'">
                        <div :class="listChildren == 1 ? 'ischange' : 'add-item'">
                            <div class="router" @click="address()">请求地址</div>
                            <!-- <router-link to="#address" >请求地址</router-link> -->
                        </div>
                        <div :class="listChildren == 2 ? 'ischange' : 'add-item'">
                            <div class="router" @click="parameter()">请求参数</div>
                        </div>
                        <div :class="listChildren == 3 ? 'ischange' : 'add-item'">
                            <div class="router" @click="res()">响应参数</div>
                        </div>
                        <div :class="listChildren == 4 ? 'ischange' : 'add-item'">
                            <div class="router" @click="example()">请求示例</div>
                        </div>
                    </div>
                    <div @click="add(4)" class="left-top" :class="list == 4 ? 'left-active' : 'left-top'">
                        <div class="semicircle" v-if="list == 4"></div>
                        <div class="bigC" v-if="true">
                            <div class="smallC"></div>
                        </div>
                        <p class="p-top">查询部门</p>
                    </div>
                    <div class="List" :class="list == 4 ? 'addList' : 'noList'">
                        <div :class="listChildren == 1 ? 'ischange' : 'add-item'">
                            <div class="router" @click="address()">请求地址</div>
                            <!-- <router-link to="#address" >请求地址</router-link> -->
                        </div>
                        <div :class="listChildren == 2 ? 'ischange' : 'add-item'">
                            <div class="router" @click="parameter()">请求参数</div>
                        </div>
                        <div :class="listChildren == 3 ? 'ischange' : 'add-item'">
                            <div class="router" @click="res()">响应参数</div>
                        </div>
                        <div :class="listChildren == 4 ? 'ischange' : 'add-item'">
                            <div class="router" @click="example()">请求示例</div>
                        </div>
                    </div>
                </div>
            </div>



            <div class="right">
                <div class="add" v-for=" item in detailList">
                    <div v-if="item.api.id == list">
                        <div class="add-nav">
                            <div class="add-up">{{ item.api.mname }}</div>
                        </div>
                        <!-- <div class="method">请求方法</div> -->
                        <table id="address">
                            <tr>
                                <td class="table-top">请求方法</td>
                            </tr>
                            <tr>
                                <td>{{ item.api.method }}</td>
                            </tr>
                            <tr>
                                <td>URL&nbsp;:&nbsp;{{ item.api.url }}</td>
                            </tr>
                        </table>
                        <div class="request" id="parameter">
                            <div class="table-top requset-top">请求参数</div>
                            <table>
                                <tr>
                                    <th style="width: 80px;">参数名</th>
                                    <th style="width: 45px;">类型</th>
                                    <th style="width: 35px;">必选</th>
                                    <th style="width: 200px;">说明</th>
                                </tr>
                                <tr v-for="reitem in item.request">
                                    <td>{{ reitem.parameter_name }}</td>
                                    <td>{{ reitem.parameter_type }}</td>
                                    <td>{{ reitem.parameter_required }}</td>
                                    <td>{{ reitem.parameter_description }}</td>
                                </tr>

                            </table>
                        </div>
                        <div class="request" id="res">
                            <div class="table-top requset-top">响应参数</div>
                            <table>
                                <tr>
                                    <th style="width: 100px;">参数名</th>
                                    <th style="width: 45px;">类型</th>
                                    <th style="width: 200px;">说明</th>
                                </tr>
                                <tr v-for=" retiem in item.response">
                                    <td>{{ retiem.parameter_name }}</td>
                                    <td>{{ retiem.parameter_type }}</td>
                                    <td>{{ retiem.parameter_description }}</td>
                                </tr>


                            </table>
                        </div>
                        <!-- <span  style="color:brown" v-show="item.request[1].parameter_name === 'userId'">"{{ item.request[1].parameter_example }}"</span> -->
                        <!-- <span  style="color:brown" v-show="item.request[2].parameter_name === 'userId'">"{{ item.request[2].parameter_example }}"</span> -->
                        <div class="request" id="example">
                            <div class="table-top requset-top" style="border:none">请求示例</div>
                            <pre class="detail-pre">
                               {
                                   <span v-for="i in item.request.length"> <span v-if="item.request[i - 1].parameter_name === 'userId'">  "userId":<span style="color:brown" >"{{ item.request[i - 1].parameter_example }}"</span></span></span>
                                   <span v-for="i in item.request.length"> <span v-if="item.request[i - 1].parameter_name === 'parentId'"> "parentId":<span style="color:brown" >"{{ item.request[i - 1].parameter_example }}"</span></span></span>
                                   <span v-for="i in item.request.length"> <span v-if="item.request[i - 1].parameter_name === 'departmentName'">"departmentName":<span style="color:brown" >"{{ item.request[i - 1].parameter_example }}"</span></span></span>
                               }
                            </pre>
                            <div class="table-top requset-top" style="border:none">响应示例</div>
                            <pre class="detail-pre">
                                {
                                   <span v-for="i in item.response.length"> <span v-if="item.response[i - 1].parameter_name === 'resultContext'">  "resultContext":<span style="color:brown" >"{{ item.response[i - 1].parameter_example }}"</span></span></span>
                                   <span v-for="i in item.response.length"> <span v-if="item.response[i - 1].parameter_name === 'departmentld'"> "departmentld":<span style="color:brown" >"{{ item.response[i - 1].parameter_example }}"</span></span></span>
                                   <span v-for="i in item.response.length"> <span v-if="item.response[i - 1].parameter_name === 'departmentNc'">"departmentNc":<span style="color:brown" >"{{ item.response[i - 1].parameter_example }}"</span></span></span>
                               }
                            </pre>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>
<script>
import { getDetail } from './../../../api/detail'

export default {
    data() {
        return {
            list: 1,
            listChildren: 1,
            isShow: false,
            detailList: [],
            id: this.$route.query.id,
            color: this.$route.query.color,
            name: this.$route.query.name,
            icon: this.$route.query.icon,
            introduce: this.$route.query.introduce,
            use: this.$route.query.use,
            view: this.$route.query.view
        }
    },
    created() {
        this.getList();
    },

    methods: {
        address() {
            document.querySelector("#address").scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
            this.listChildren = 1
        },
        parameter() {
            document.querySelector("#parameter").scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
            this.listChildren = 2
        },
        res() {
            document.querySelector("#res").scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
            this.listChildren = 3
        },
        example() {
            document.querySelector("#example").scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
            this.listChildren = 4
        },
        add(em) {
            this.list = em
            this.listChildren = 1
        },

        getList() {
            this.loading = true
            getDetail(this.id).then(response => {
                this.detailList = response.data
            })

        }

    },
    mounted() {
        window.addEventListener('scroll', () => {
            const scroll = document.documentElement.scrollTop
            if (scroll >= 420) {
                this.isShow = true
            } else {
                this.isShow = false
            }
        })
    }

}
</script>

<style scoped lang="scss">
* {
    margin: 0 auto;
    padding: 0;
}

.detailbody {
    max-width: 100%;
    margin: 0 auto;

    .detail-img {
        height: 270px;
        width: 100%;
        min-width: 1500px;
        // background: linear-gradient(to bottom right, rgb(71, 186, 170), rgb(7, 153, 254), rgb(105, 198, 237));

        .img-item {
            display: flex;
            width: 2400px;
            height: 270px;
            position: relative;
            overflow: hidden;

            .img-left {

                width: 100%;
                height: 270px;
                display: flex;
                flex-flow: wrap;
                line-height: 600px;
                margin-top: -50px;

                transform: scale(2.2) rotate(20deg);



                .svgsize {
                    font-size: 60px;
                    color: white;
                    margin: 17px;
                    opacity: 0.6;
                }
            }

            .img-center {
                width: 40%;
                padding-top: 50px;
                position: absolute;
                // top: 10px;
                left: 20%;


                .img-title {

                    font-size: 28px;
                    font-weight: 800;
                    -webkit-text-stroke: 1px #ffffff;
                    //     width: 100%;
                    //    text-align: center;
                }

                .intro {
                    color: white;
                    font-size: 20px;
                    font-weight: 600;
                    // -webkit-text-stroke:1px #000000;
                }

                p {
                    margin-bottom: 7px;
                }

                .img-time {
                    margin-bottom: 7px;

                    span {
                        font-size: 14px;
                        opacity: 0.8;
                        margin-right: 25px;
                    }
                }

                .state {
                    font-size: 14px;
                    opacity: 0.5;
                    margin-right: 25px;
                    margin-bottom: 7px;

                }
            }

            .img-right {
                width: 30%;
                display: flex;
                justify-content: space-evenly;
                flex-direction: column;

                .img-button {
                    font-size: 35px;
                    height: 100px;
                    width: 100px;
                    background-color: rgb(71, 186, 170);
                    color: white;
                    border-radius: 10px;
                    border: none;


                }
            }
        }
    }

    .p-top {
        font-size: 28px;
        font-weight: 600;
    }


    .nav {
        width: 100%;
        padding: 0 10% 0 10%;
        display: flex;
        height: 50px;
        background-color: rgb(238, 238, 238);
        margin: -5px;
        box-shadow: 0px 1px 0 rgb(189, 189, 189);
        line-height: 50px;

        .divlink {
            min-width: 100px;
            text-align: center;
            position: relative;
            width: 6%;
        }

        .title {
            margin-left: 10%;
            margin-right: 0;
        }

        .active {
            background-color: rgb(7, 153, 254);
            color: white;
            margin-left: 0;

            .active-div {
                display: block;
                content: "";
                position: absolute;
                top: 50px;
                left: 40%;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-top: 10px solid rgb(7, 153, 254);
            }
        }
    }

    .detailmain {
        display: flex;
        margin-top: 50px;
        position: relative;

        .flexd-left {
            position: fixed;

        }

        .nofixed {
            position: relative;
            top: 0;

        }

        .showfixed {
            position: sticky;
            top: 80px;

        }

        .left-list {
            width: 300px;
            position: relative;
            height: 1500px;
            margin-right: 0;


        }

        .left {
            border-radius: 17px;
            border: 1px solid rgb(223, 223, 223);
            // border-top:3px solid rgb(7, 153, 254);
            overflow: hidden;
            box-sizing: border-box;
            // border: 1px solid rgb(219, 219, 219);
            width: 300px;
            height: 500px;
            // border: 1px solid black;
            margin-right: 0;
            background-color: white;
            box-shadow: 0px 3px 4px rgb(125, 142, 155);
            box-sizing: border-box;

            .left-active {
                background-color: rgb(7, 153, 254);
                box-shadow: 0px 3px 3px rgb(92, 104, 114);
                color: white;
                position: relative;
                border-radius: 15px;


            }

            .left-top-item {
                background-color: white;
                width: 300px;
                height: 55px;
                position: relative;
            }



            .left-top {
                position: relative;
                height: 65px;
                display: flex;
                width: 300px;
                // border-right: 1px solid rgb(218, 218, 218);




                .semicircle {
                    position: absolute;
                    width: 25px;
                    height: 25px;
                    background-color: rgb(7, 153, 254);
                    border-radius: 50%;
                    top: 37px;
                    left: 10px;
                    opacity: 1;
                }

                p {
                    margin: auto 0 auto 0;
                    font-size: 18px;

                }

                .bigC {
                    margin: auto 10px auto 10px;
                    height: 25px;
                    width: 25px;
                    border: 1px solid rgb(255, 255, 255);
                    border-radius: 50%;
                    box-sizing: border-box;
                    z-index: 10;

                    .smallC {
                        height: 15px;
                        width: 15px;
                        margin-top: 4px;
                        background-color: rgb(255, 255, 255);
                        border-radius: 50%;
                        box-sizing: border-box;

                    }
                }
            }

            .noList {
                height: 0;
                overflow: hidden;
                transition: 1s;
                background-color: white;
                opacity: 0;
            }

            .addList {
                height: 230px;
                transition: 1s;
                padding-top: 15px;
                padding: 15px;
                background: white;
                opacity: 1;
                overflow: hidden;
                border-bottom: 3px solid rgb(0, 149, 255);

            }

            .List {
                overflow: hidden;
                box-sizing: border-box;
                transition: 1s;
                background: white;
                // border: 1px solid rgb(204, 204, 204);
                // border: 1px solid rgb(185, 185, 185);

                .ischange {
                    border-left: 4px solid rgb(0, 149, 255);
                    color: rgb(28, 147, 233);
                    margin-left: 40px;
                    height: 50px;
                    line-height: 50px;
                    font-size: 18px;
                    // border-left: 4px solid rgb(212, 212, 212);
                    transition: 0.5s;
                    font-weight: 600;
                    font-size: 22px;
                }

                .add-item {
                    margin-left: 40px;
                    height: 50px;
                    line-height: 50px;
                    font-size: 18px;
                    border-left: 4px solid rgb(236, 236, 236);
                    transition: 0.5s;


                }

                .router {
                    margin-left: 40px;

                }

            }

        }

        .right {
            width: 1100px;
            height: 1470px;
            border: 1px solid rgb(182, 182, 182);
            margin-left: 0;
            padding: 40px;

            .add-nav {
                font-size: 22px;
                border-bottom: 2px solid rgb(9, 135, 224);

                .add-up {
                    margin-bottom: 10px;
                    border-left: 4px solid rgb(9, 135, 224);
                    padding-left: 15px;
                }
            }

            .table-top {

                font-size: 20px;
                font-weight: 600;
                text-align: left;

            }

            table {
                width: 1000px;

            }

            table td,
            table th {

                margin-left: 10px;
                border-bottom: 1px dashed rgb(179, 179, 179);
                height: 65px;
                line-height: 65px;
                margin-left: 0;
                text-align: left;
            }

            tr {
                width: 870px;
                height: 60px;
                margin-left: 0;


            }

            .request {
                margin-top: 30px;

                .requset-top {
                    margin-left: 10px;
                    height: 65px;
                    line-height: 65px;
                    border-bottom: 2px solid rgb(221, 221, 221);
                }

                .item1 {
                    margin-top: 20px;
                }

            }

            pre {
                padding-left: 3.8em;
                width: 900px;
                margin: 0;
                background-color: rgb(204, 204, 204);
            }


        }

    }

}

// .footer {
//     margin-top: 50px;
//     width: 100%;
//     background-color: rgb(239, 249, 250);
//     height: 350px;

//     img {
//         width: 100%;
//         height: 20px;

//     }

//     .foot {
//         display: flex;
//         justify-self: center;
//         width: 100%;

//         div {
//             width: 22%;
//             text-align: center;
//             padding-left: 270px;
//             box-sizing: border-box;

//             h3 {
//                 text-align: left;
//             }

//             p {
//                 text-align: left;
//                 width: 170px;
//                 font-size: 15px;
//                 margin-top:15px;
//             }


//             &:hover {
//                 color: rgb(7, 153, 254);
//             }
//         }


//     }

// }</style>